<!DOCTYPE html>
<html>
    <head>
        <title>{{title}}</title>
        <meta name="description" content="overview &amp; stats">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300">
        <link rel="stylesheet" href="/assets_style.css">
        {{#styles}}
            <link rel="stylesheet" href="/stylesheets/{{name}}.css">
        {{/styles}}
        <script src="/assets_javascript.js"></script>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">
                <a href="#" class="brand">
                    <small>
                        <i class="icon-leaf"></i>
                        Ace Admin
                    </small>
                </a><!--/.brand-->

                <ul class="nav ace-nav pull-right">
                <li class="grey">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <i class="icon-tasks"></i>
                        <span class="badge badge-grey">4</span>
                    </a>

                    <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-closer">
                        <li class="nav-header">
                            <i class="icon-ok"></i>
                            4 Tasks to complete
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">Software Update</span>
                                    <span class="pull-right">65%</span>
                                </div>

                                <div class="progress progress-mini ">
                                    <div style="width:65%" class="bar"></div>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">Hardware Upgrade</span>
                                    <span class="pull-right">35%</span>
                                </div>

                                <div class="progress progress-mini progress-danger">
                                    <div style="width:35%" class="bar"></div>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">Unit Testing</span>
                                    <span class="pull-right">15%</span>
                                </div>

                                <div class="progress progress-mini progress-warning">
                                    <div style="width:15%" class="bar"></div>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">Bug Fixes</span>
                                    <span class="pull-right">90%</span>
                                </div>

                                <div class="progress progress-mini progress-success progress-striped active">
                                    <div style="width:90%" class="bar"></div>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                See tasks with details
                                <i class="icon-arrow-right"></i>
                            </a>
                        </li>
                    </ul>
                </li>

                <li class="purple">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <i class="icon-bell-alt icon-only icon-animated-bell"></i>
                        <span class="badge badge-important">8</span>
                    </a>

                    <ul class="pull-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-closer">
                        <li class="nav-header">
                            <i class="icon-warning-sign"></i>
                            8 Notifications
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">
                                        <i class="btn btn-mini no-hover btn-pink icon-comment"></i>
                                        New Comments
                                    </span>
                                    <span class="pull-right badge badge-info">+12</span>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="btn btn-mini btn-primary icon-user"></i>
                                Bob just signed up as an editor ...
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">
                                        <i class="btn btn-mini no-hover btn-success icon-shopping-cart"></i>
                                        New Orders
                                    </span>
                                    <span class="pull-right badge badge-success">+8</span>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">
                                        <i class="btn btn-mini no-hover btn-info icon-twitter"></i>
                                        Followers
                                    </span>
                                    <span class="pull-right badge badge-info">+11</span>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                See all notifications
                                <i class="icon-arrow-right"></i>
                            </a>
                        </li>
                    </ul>
                </li>

                <li class="green">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <i class="icon-envelope-alt icon-only icon-animated-vertical"></i>
                        <span class="badge badge-success">5</span>
                    </a>

                    <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-closer">
                        <li class="nav-header">
                            <i class="icon-envelope"></i>
                            5 Messages
                        </li>

                        <li>
                            <a href="#profile?username=alex">
                                <img src="assets/avatars/avatar.png" class="msg-photo user-icon" data-id="1" alt="Alex's Avatar">
                                <span class="msg-body">
                                    <span class="msg-title">
                                        <span class="blue">Alex:</span>
                                        Ciao sociis natoque penatibus et auctor ...
                                    </span>

                                    <span class="msg-time">
                                        <i class="icon-time"></i>
                                        <span>a moment ago</span>
                                    </span>
                                </span>
                            </a>
                        </li>

                        <li>
                            <a href="#profile?username=Susan">
                                <img src="assets/avatars/avatar3.png" class="msg-photo user-icon" data-id="2" alt="Susan's Avatar">
                                <span class="msg-body">
                                    <span class="msg-title">
                                        <span class="blue">Susan:</span>
                                        Vestibulum id ligula porta felis euismod ...
                                    </span>

                                    <span class="msg-time">
                                        <i class="icon-time"></i>
                                        <span>20 minutes ago</span>
                                    </span>
                                </span>
                            </a>
                        </li>

                        <li>
                            <a href="#profile?username=Bob">
                                <img src="assets/avatars/avatar4.png" class="msg-photo user-icon" data-id="1" alt="Bob's Avatar">
                                <span class="msg-body">
                                    <span class="msg-title">
                                        <span class="blue">Bob:</span>
                                        Nullam quis risus eget urna mollis ornare ...
                                    </span>

                                    <span class="msg-time">
                                        <i class="icon-time"></i>
                                        <span>3:15 pm</span>
                                    </span>
                                </span>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                See all messages
                                <i class="icon-arrow-right"></i>
                            </a>
                        </li>
                    </ul>
                </li>

                <li class="light-blue user-profile">
                    <a data-toggle="dropdown" href="#" class="user-menu dropdown-toggle">
                        <img class="nav-user-photo" src="assets/avatars/user.jpg" alt="Jason's Photo">
                        <span id="user_info">
                            <small>Welcome,</small>
                            Jason
                        </span>

                        <i class="icon-caret-down"></i>
                    </a>

                    <ul class="pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-closer" id="user_menu">
                        <li>
                            <a href="#">
                                <i class="icon-cog"></i>
                                Settings
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="icon-user"></i>
                                Profile
                            </a>
                        </li>

                        <li class="divider"></li>

                        <li>
                            <a href="#">
                                <i class="icon-off"></i>
                                Logout
                            </a>
                        </li>
                    </ul>
                </li>
                </ul>
                <!--/.ace-nav-->
                </div>
                <!--/.container-fluid-->
            </div>
            <!--/.navbar-inner-->
        </div>
        <div class="container-fluid">
            <div id="sidebar" class="fixed">
                <div id="sidebar-shortcuts">
                    <div id="sidebar-shortcuts-large">
                        <button class="btn btn-small btn-success">
                            <i class="icon-signal"></i>
                        </button>

                        <button class="btn btn-small btn-info">
                            <i class="icon-pencil"></i>
                        </button>

                        <button class="btn btn-small btn-warning">
                            <i class="icon-group"></i>
                        </button>

                        <button class="btn btn-small btn-danger">
                            <i class="icon-cogs"></i>
                        </button>
                    </div>

                    <div id="sidebar-shortcuts-mini">
                        <span class="btn btn-success"></span>

                        <span class="btn btn-info"></span>

                        <span class="btn btn-warning"></span>

                        <span class="btn btn-danger"></span>
                    </div>
                </div><!--#sidebar-shortcuts-->

                <ul class="nav nav-list">
                    <li class="active">
                        <a href="#dashboard">
                            <i class="icon-dashboard"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>

                    <li>
                        <a href="#typography">
                            <i class="icon-text-width"></i>
                            <span>Typography</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-desktop"></i>
                            <span>UI Elements</span>

                            <b class="arrow icon-angle-down"></b>
                        </a>

                        <ul class="submenu">
                            <li>
                                <a href="#elements">
                                    <i class="icon-double-angle-right"></i>
                                    Elements
                                </a>
                            </li>

                            <li>
                                <a href="#buttons">
                                    <i class="icon-double-angle-right"></i>
                                    Buttons &amp; Icons
                                </a>
                            </li>

                            <li>
                                <a href="#treeview">
                                    <i class="icon-double-angle-right"></i>
                                    Treeview
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li>
                        <a href="#tables">
                            <i class="icon-list"></i>
                            <span>Tables</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-edit"></i>
                            <span>Forms</span>

                            <b class="arrow icon-angle-down"></b>
                        </a>

                        <ul class="submenu">
                            <li>
                                <a href="#form-elements">
                                    <i class="icon-double-angle-right"></i>
                                    Form Elements
                                </a>
                            </li>

                            <li>
                                <a href="#form-wizard">
                                    <i class="icon-double-angle-right"></i>
                                    Wizard &amp; Validation
                                </a>
                            </li>

                            <li>
                                <a href="#wysiwyg">
                                    <i class="icon-double-angle-right"></i>
                                    Wysiwyg &amp; Markdown
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li>
                        <a href="#widgets">
                            <i class="icon-list-alt"></i>
                            <span>Widgets</span>
                        </a>
                    </li>

                    <li>
                        <a href="#calendar">
                            <i class="icon-calendar"></i>
                            <span>Calendar</span>
                        </a>
                    </li>

                    <li>
                        <a href="#gallery">
                            <i class="icon-picture"></i>
                            <span>Gallery</span>
                        </a>
                    </li>

                    <li>
                        <a href="#grid">
                            <i class="icon-th"></i>
                            <span>Grid</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-file"></i>
                            <span>Other Pages</span>

                            <b class="arrow icon-angle-down"></b>
                        </a>

                        <ul class="submenu">
                            <li>
                                <a href="#pricing">
                                    <i class="icon-double-angle-right"></i>
                                    Pricing Tables
                                </a>
                            </li>

                            <li>
                                <a href="#invoice">
                                    <i class="icon-double-angle-right"></i>
                                    Invoice
                                </a>
                            </li>

                            <li>
                                <a href="#login">
                                    <i class="icon-double-angle-right"></i>
                                    Login &amp; Register
                                </a>
                            </li>

                            <li>
                                <a href="#error-404">
                                    <i class="icon-double-angle-right"></i>
                                    Error 404
                                </a>
                            </li>

                            <li>
                                <a href="#error-500">
                                    <i class="icon-double-angle-right"></i>
                                    Error 500
                                </a>
                            </li>

                            <li>
                                <a href="#blank">
                                    <i class="icon-double-angle-right"></i>
                                    Blank Page
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul><!--/.nav-list-->

                <div id="sidebar-collapse">
                    <i class="icon-double-angle-left"></i>
                </div>
            </div>
            <div id="main-content" class="clearfix">
                <div id="breadcrumbs">
                    <ul class="breadcrumb">
                        <li>
                            <i class="icon-home"></i>
                            <a href="#home">Home</a>

                                <span class="divider">
                                    <i class="icon-angle-right"></i>
                                </span>
                        </li>
                        <li class="active">Widgets</li>
                    </ul><!--.breadcrumb-->

                    <div id="nav-search">
                        <form class="form-search">
                                <span class="input-icon">
                                    <input type="text" placeholder="Search ..." class="input-small search-query" id="nav-search-input" autocomplete="off">
                                    <i class="icon-search" id="nav-search-icon"></i>
                                </span>
                        </form>
                    </div><!--#nav-search-->
                </div>

                <div id="page-content" class="clearfix"></div><!--/#page-content-->

                <div id="ace-settings-container">
                <div class="btn btn-app btn-mini btn-warning" id="ace-settings-btn">
                    <i class="icon-cog"></i>
                </div>

                <div id="ace-settings-box">
                    <div>
                        <div class="pull-left">
                            <select id="skin-colorpicker" class="hidden" style="display: none;">
                                <option data-class="default" value="#438EB9">#438EB9</option>
                                <option data-class="skin-1" value="#222A2D">#222A2D</option>
                                <option data-class="skin-2" value="#C6487E">#C6487E</option>
                                <option data-class="skin-3" value="#D0D0D0">#D0D0D0</option>
                            </select><div class="dropdown dropdown-colorpicker"><a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="btn-colorpicker" style="background-color:#438EB9"></span></a><ul class="dropdown-menu dropdown-caret"><li><a class="colorpick-btn selected" href="#" style="background-color:#438EB9;" data-color="#438EB9"></a></li><li><a class="colorpick-btn" href="#" style="background-color:#222A2D;" data-color="#222A2D"></a></li><li><a class="colorpick-btn" href="#" style="background-color:#C6487E;" data-color="#C6487E"></a></li><li><a class="colorpick-btn" href="#" style="background-color:#D0D0D0;" data-color="#D0D0D0"></a></li></ul></div>
                        </div>
                        <span>&nbsp; Choose Skin</span>
                    </div>

                    <div>
                        <input type="checkbox" class="ace-checkbox-2" id="ace-settings-header">
                        <label class="lbl" for="ace-settings-header"> Fixed Header</label>
                    </div>

                    <div>
                        <input type="checkbox" class="ace-checkbox-2" id="ace-settings-sidebar">
                        <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
                    </div>
                </div>
            </div><!--/#ace-settings-container-->
            </div>
        </div>
        {{#scripts}}
            <script src="/javascripts/{{name}}.js"></script>
        {{/scripts}}
    </body>
</html>